<template>
  <div class="data-table">
    <div class="table-header" v-if="$slots.header">
      <slot name="header" />
    </div>

    <div class="table-toolbar" v-if="showToolbar">
      <div class="toolbar-left">
        <slot name="toolbar-left" />
      </div>
      <div class="toolbar-right">
        <a-input-search
          v-if="showSearch"
          v-model:value="searchText"
          placeholder="搜索..."
          style="width: 200px"
          @search="handleSearch"
        />
        <slot name="toolbar-right" />
      </div>
    </div>

    <a-table
      :columns="columns"
      :data-source="dataSource"
      :loading="loading"
      :pagination="pagination"
      :row-key="rowKey"
      :scroll="{ x: 'max-content' }"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <slot :name="column.dataIndex" :record="record" :column="column">
          {{ record[column.dataIndex] }}
        </slot>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  columns: {
    type: Array,
    required: true
  },
  dataSource: {
    type: Array,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  rowKey: {
    type: [String, Function],
    default: 'id'
  },
  showToolbar: {
    type: Boolean,
    default: true
  },
  showSearch: {
    type: Boolean,
    default: true
  },
  pagination: {
    type: [Object, Boolean],
    default: () => ({
      total: 0,
      current: 1,
      pageSize: 10,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: (total) => `共 ${total} 条`
    })
  }
})

const emit = defineEmits(['change', 'search'])

const searchText = ref('')

const handleSearch = (value) => {
  emit('search', value)
}

const handleTableChange = (pagination, filters, sorter) => {
  emit('change', { pagination, filters, sorter })
}
</script>

<style scoped>
.data-table {
  background: #fff;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow);
  overflow: hidden;
}

.table-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

:deep(.ant-table) {
  background: transparent;
}

:deep(.ant-table-thead > tr > th) {
  background: var(--background-color-base);
  font-weight: 600;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: var(--primary-1);
}

:deep(.ant-table-pagination) {
  margin: var(--spacing-md) var(--spacing-lg);
}

/* 暗色主题适配 */
[data-theme='dark'] .data-table {
  background: var(--background-color-dark);
}

[data-theme='dark'] .table-header,
[data-theme='dark'] .table-toolbar {
  border-bottom-color: var(--border-color);
}

[data-theme='dark'] :deep(.ant-table-thead > tr > th) {
  background: #1f1f1f;
}

[data-theme='dark'] :deep(.ant-table-tbody > tr:hover > td) {
  background: #303030;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .table-toolbar {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .toolbar-left,
  .toolbar-right {
    width: 100%;
  }

  :deep(.ant-table-pagination) {
    margin: var(--spacing-sm);
  }
}
</style> 